<template >

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item >
       <span style="font-weight: bolder"> <i class="el-icon-s-promotion"></i> 后台管理首页</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

      <template>
        <div style="width: 50%;margin-top: 50px">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-card style="border-radius: 20px">
                <el-statistic group-separator="," :value="olderNum" title="老人总数(人)"></el-statistic>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card style="border-radius: 20px">
                <el-statistic title="餐品数量(个)">
                  <template slot="formatter"> {{foodNum}}</template>
                </el-statistic>
              </el-card>
            </el-col>

            <el-col :span="6">
              <el-card style="border-radius: 20px">
                <el-statistic  :value="floorNum" title="床位数量(个)">
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"></i>
                  </template>
                  <template slot="suffix">
                    <i class="el-icon-s-flag" style="color: blue"></i>
                  </template>
                </el-statistic>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card style="border-radius: 20px">
                <el-statistic title="访客数量(人)" :value="visitorNum">
                </el-statistic>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </template>
    <div style="width: 50%;height:320px;overflow:hidden">
      <div style="width: 100%;height:320px;float: left;margin-top: 15px">
        <el-card style="border-radius: 20px">
        <h3 style="text-align: center;">入住情况</h3>
      <div id="top" style="width: 100%;height:250px;margin-top: -25px"> </div>
        </el-card>
      </div>
    </div>
    <el-card style="width: 39%;height:390px;position:absolute;right: 35px;top:110px;border-radius: 20px">
      <div id="topright" style="width: 100%;height:370px;" >  </div>
    </el-card>
    <div style="height: 350px;width: 100%;">
      <div style="height: 350px;width: 1000px;float: left;">
        <el-card style="border-radius: 20px;overflow: hidden">
        <h3 style="margin-left:350px;margin-top: 10px">近一周访客人数</h3>
      <div id="left" style="width: 1000px;height: 300px;margin-left: -20px"></div>
        </el-card>
      </div>
      <div style="height: 350px;width: 535px;float: left;margin-left: 10px">
        <el-card style="border-radius: 20px">
      <h3 style="text-align: center;margin-top: 10px">床位分配情况</h3>
      <div id="main" style="text-align: center;width: 500px;height: 300px">
      </div>
        </el-card>
      </div>
    </div>




  </div>
</template>

<script>


import router from "@/router";

export default {
  data() {
    return{
      like: true,
      value1: 4154.564,
      olderNum:'',
      foodNum:'',
      floorNum:'',
      visitorNum:'',
    };
  },methods: {
    loadoption()
    {
      var myChart = this.echarts.init(document.getElementById('main'),null);

     /* console.log(this.checkNum);
      console.log(this.nocheckNum-this.checkNum);*/
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人({d}%)'
        },
        series: [
          {
            type: 'pie',
            name:'床位分配情况',
            data: [
              {
                value:localStorage.getItem("nocheckNum")-localStorage.getItem("checkNum"),
                name: '未分配',
                label: {
                  normal: {
                    show: true,
                    formatter: '{b}: {c}人({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                  }
                }
              },
              {
                value: localStorage.getItem("checkNum"),
                name: '已入住',
                label: {
                  normal: {
                    show: true,
                    formatter: '{b}: {c}人({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                  }
                }
              }
            ],labelLine: {
              show: true, //隐藏指示线
            },
            label: {
              show: true,
            }
          }
        ]
      };
      myChart.setOption(option);

      let currentIndex = -1;
      myChart.on('mouseup',
        function() {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
          currentIndex = (currentIndex + 1) % dataLen;
          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
          // 显示 tooltip
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
        }
      );

      myChart.on('click', function(params) {
        router.push("/admin/check/checkInfo");
      });
    },
    loadoption1()
    {
      var myChartleft = this.echarts.init(document.getElementById('left'));
      let visitorWeekCount =JSON.parse(localStorage.getItem("visitorWeekCount"));
      let count = [0,0,0,0,0,0,0];
      for (let i = 0; i < visitorWeekCount.length; i++) {
        if(visitorWeekCount[i].week==0)
        {
          count[6]=visitorWeekCount[i].num;
        }
        else {
          count[visitorWeekCount[i].week-1]=visitorWeekCount[i].num;
        }
      };
      var option1 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br>{b} : {c}人'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          icon: 'rect',
          right: 10,
          top: 20,
          bottom: 20,
          data: ['访客人数']
          // ...
        },
        xAxis: {
          type: 'category',
          data: ['星期一', '星期二', '星期三','星期四','星期五','星期六','星期日'],
        },
        yAxis: {
          type:'value',
          min: 0,
          max: 100,
        },
        series: [
          {
            data: count,
            type: 'line',
            name: '访客人数',
            color:"#E6A23C"
          }
        ]
      };
      myChartleft.setOption(option1);

      let currentIndex = -1;
      myChartleft.on('mouseup',
          function() {
            // 显示 tooltip
            myChartleft.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: currentIndex
            });
          }
      );
      myChartleft.on('click', function(params) {
        router.push("/admin/visitor/list");
      });
    },
    loadoption2()
    {
      var myCharttop = this.echarts.init(document.getElementById('top'));
      let foorList = JSON.parse(localStorage.getItem("floorList"));
      let foorCountList = JSON.parse(localStorage.getItem("floorCountList"));
      let foorBedCountList = JSON.parse(localStorage.getItem("floorBedcountList"));
      for (let i = 0; i < foorList.length; i++) {
        foorList[i] = foorList[i]+"楼";
      }
      var option2 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} : {c}个'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          icon: 'rect',
          right: -5,
          top: 20,
          bottom: 20,
          data: ['床位数','入住人数']
          // ...
        },
        xAxis: {
            data: foorList,
        },
        yAxis: {

          // ...
          min: 0,
          max: 40,
        },
        series: [
          {
            type: 'bar',
            data: foorBedCountList,
            name:'床位数',
          },
          {
            type: 'bar',
            data: foorCountList,
            name:'入住人数',
            color:"#E6A23C"
          }
        ]
      };
      myCharttop.setOption(option2);
      myCharttop.on('click', function(params) {
        router.push("/admin/bed/list");
      });

      let currentIndex = -1;
      myCharttop.on('mouseup',
          function() {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myCharttop.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 1) % dataLen;
            // 高亮当前图形
            myCharttop.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: currentIndex
            });
            // 显示 tooltip
            myCharttop.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: currentIndex
            });
          }
      );
    },
    loadoption3()
    {
      var myCharttopright = this.echarts.init(document.getElementById('topright'));
      let roleList = JSON.parse(localStorage.getItem("roleCount"));
      var data = [];
      let title = [];
      for (let i = 0; i < roleList.length; i++) {
        data.push(roleList[i].num);
        title.push(roleList[i].name)
      }

      var option4 = {
        color: [
          '#E6A23C'
        ],
        xAxis: {
        min:0,
          max:10
        },
        yAxis: {
          type: 'category',
          data:title,
          inverse: true,
          max: title.length-1,// only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: '各员工人数',
            type: 'bar',
            data: data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              formatter: '{c}人'
            }
          }
        ],
        legend: {
          show: true,
          textStyle: {  fontSize: 18,fontWeight: 'bolder'}
        },

        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      };

      function update() {
        var data = option4.series[0].data;

        myCharttopright.setOption(option4);
      }
      setInterval(function() {
        update();
      }, 100);
      myCharttopright.on('click', function(params) {
        router.push("/admin/staff/list");
      });
    },
    loadtop()
    {
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/older-num").then((response)=>{
        this.olderNum = response.data.data;
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/food-num").then((response)=>{
        this.foodNum = response.data.data;
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/bed-num").then((response)=>{
        this.floorNum = response.data.data;
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/visitor-num").then((response)=>{
        this.visitorNum = response.data.data;
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/nocheck-num").then((response)=>{
        localStorage.setItem("nocheckNum", response.data.data);
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/check-num").then((response)=>{
        localStorage.setItem("checkNum",response.data.data );
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/floor-list").then((response)=>{
        localStorage.setItem("floorList",JSON.stringify(response.data.data));
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/floorcount-list").then((response)=>{
        localStorage.setItem("floorCountList",JSON.stringify(response.data.data));
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/floorBedcount-list").then((response)=>{
        localStorage.setItem("floorBedcountList",JSON.stringify(response.data.data));
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/visitorWeekCount-list").then((response)=>{
        localStorage.setItem("visitorWeekCount",JSON.stringify(response.data.data));
      })
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
      }).get("http://localhost:8080/static/role-list").then((response)=>{
        localStorage.setItem("roleCount",JSON.stringify(response.data.data));
      })
    },
    remove()
    {
      localStorage.removeItem("visitorWeekCount");
      localStorage.removeItem("checkNum");
      localStorage.removeItem("nocheckNum");
      localStorage.removeItem("floorList");
      localStorage.removeItem("floorCountList");
      localStorage.removeItem("floorBedcountList");
      localStorage .removeItem("roleCount");
    }
  },
  mounted:function (){
    this.loadtop();
    this.loadoption();
    this.loadoption1();
    this.loadoption2();
    this.loadoption3();
    this.remove();
  }

};

</script>

<style >
</style>